【Day09】前端撰寫（6）淺談RWD響應式網頁設計

2023 iThome 鐵人賽

DAY 9

Modern Web

連我阿公都會-手把手教你架網站系列第 9 篇

15th鐵人賽 css rwd 網頁設計前端

ttdragon0722

團隊最強資工大電神

2023-09-24 10:52:14

330 瀏覽

分享至

擷自 digitalsynopsis.com

在前面的篇章中，我們學習了如何撰寫CSS的各個屬性來設計出精美的網頁，但您是否有想過：「用電腦設計出來的網頁，為甚麼也能完美適應手機的視窗呢？」

當然不是用魔法變出來的啦，因此，在本篇文章中，我將詳細講解何謂RWD響應式網頁，以及如何做出能夠適應各式設備或網頁尺寸的網頁喔！

什麼是 RWD 響應式網頁？

RWD 響應式網頁是一向網頁設計的技術，它能夠在不同的設備上（如桌面電腦、平板電腦、手機等）提供最佳的使用體驗。網頁的版面、排版、圖片大小、字體大小等都會根據不同的設備進行微調，以便使用者在不同的設備上都能夠輕鬆地訪問網站並瀏覽內容。

RWD 響應式網頁的優點在於：

為使用者提供了良好的使用體驗，不管是在桌上電腦還是在手機上瀏覽網頁都非常方便。
可以節省維護成本，因為網頁本體可以響應於不同設備，無須為了因應不同設備而多架網站，只需要維護一個網站即可。
提高了網站的SEO（搜尋引擎優化）效果，因為各大搜索引擎都更傾向於推薦響應式網頁。

有了這些基本的概念後，我們便可以更深入研究RWD：

F12 ⇒ DevTools（網頁開發者工具）

當我們在使用Chrome或Edge瀏覽網頁時，按下 F12 後會跑出一個神奇的畫面：

這個充滿了程式碼的介面名為DevTools網頁開發者工具，全部展開後會長這樣：

DevTools，網頁開發者工具，是網頁開發者不可或缺的工具之一，它能夠讓我們直接在瀏覽器中，了解該網頁或應用程式的性能和結構，以方便我們進行測試、監控、除錯和優化。接下來，我將詳細為您介紹如何使用這個方便的工具！

開啟方法：

右鍵單擊頁面元件，於清單內點選：檢查。
在主菜單中選擇：更多工具 → 開發人員工具。
使用Window/Linux系統時，按下快捷鍵：F12/Control + Shift + I。
使用Mac系統時，按下快捷鍵：Command + Option + I。

元素

打開DevTools後，預設會停留在元素的介面，這裡可以查看網頁DOM（文件物件模型，即HTML文本裡的各個標籤，包括文字、圖片…等等元件），網頁開發者可以檢視並修改裏頭的HTML和CSS文本程式碼，並透過點擊文素來做即時且可預覽的修改。

主控台

主控台中，我們可以查看log（網頁開發日誌），和JavaScript中的錯誤。我們可以在這裡查看並修改JavaScript代碼，而後直接進行測試。如此實用的功能，能夠幫助我們提高在開發javascript的速度。

您可以試試在主控台的輸入框輸入： console.log(”資料”)

隨後便會看到一串資訊顯示出來：

當然，也可以輸入其他指令，在頁面上與JavaScript進行各種互動。當我們輸入：alert("彈跳視窗文字") ，頁面會跳出一個彈跳視窗，很酷吧！

網路

在網路工具的頁面中，會顯示網路的效能測試及報告。我們可以獲取整個頁面大大小小的資料的狀態，如：網頁請求、回應資訊、狀態碼…等。透過查看網頁請求和回應的結果，我們便可以知道網頁的元件是否有載入成功，也能在開發後端時了解是否有成功獲取request。

這部份我們會在之後的後端開發教學內詳談！

使用快捷鍵： CTRL + R 即可開啟網路功能。

此處可以看到網頁的所有請求都被列在下方欄位：

裏頭也會顯示各個資料的詳細數據：

CSS總覽

在CSS總覽中，我們可以快速地統整個網頁所使用的配色和設計樣式。

保持元件一致性對於網頁設計非常之重要，這個工具不僅可以幫助我們統整樣式，~~當我們想要參考其他網頁的設計和配色時，便可以從這裡挖取一些資訊。~~

RWD介面

按下該按鍵之後，上方會出現一個長條面板：

我們在上方可以看到調整尺寸的地方，該處可以自行設定網頁開發所要應對的裝置視窗大小，也可以選擇檢視該網頁在不同裝置上的顯示方式：

點選更多，可以看到列表中的更多功能，像是顯示尺規、媒體查詢和擷取螢幕擷取…等功能。

在CSS中套用RWD

淺略介紹完DevTools後，我們將正式進入RWD的領域，想要在CSS中套用RWD，以下是基礎的語法：

@media (畫面寬度:數值) {
		選擇器 {
				屬性
		}
}

和普通的CSS屬性語法幾乎一樣，唯一不同的是在該屬性外又包了一層：@media () {}

簡單範例：

<body style="width: 100%;height: 100vh;"></body>
<style>
    body {
        background-color: red;
    }

    @media (max-width:768px) {
        body {
            background-color: blue;
        }
    }

    @media (max-width:375px) {
        body {
            background-color: green;
        }
    }
</style>

在上述的範例中，我們body的預設背景顏色是紅色，而當我們的寬度小於768px時：設置背景顏色變為藍色，又，當寬度小於375時，設置背景顏色變為綠色。非常很直觀的邏輯。